<template>
  <div>
    <div v-if="infoObj.equNo" class="infoWindow animate__animated animate__zoomIn">
      <img src="@/assets/dashboard/close.png" class="close_img" @click="$emit('closeInfoWindow')" />
      <div class="title">{{ infoObj.name }}</div>
      <div class="content">
        <div class="left_content">
          <div class="equip-title-wrap">
            <div class="line1">
              <img src="@/assets/dashboard/small_gd.png" class="sbxx_img" />
              <span>设备信息-{{ infoObj.equNo }}</span>
            </div>
            <div v-if="infoObj.showOtherEquip" class="other-equip-btn">
              <el-dropdown size="mini">
                <span class="el-dropdown-link"> 其他设备<i class="el-icon-arrow-down el-icon--right"></i> </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="equip in otherEquipList"
                    :key="equip.id"
                    @click.native="changeShowEquipInfo(equip)"
                    >{{ equip.equType | filtereEuipType(equipTypeList) }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div>
            <div class="line2">
              <div>
                <img src="@/assets/dashboard/lx.png" class="lx_img" />
                <span>{{ infoObj.equType | filtereEuipType(equipTypeList) }}</span>
                <span class="status">{{
                  infoObj.equOnlineStatus == 1
                    ? '未激活'
                    : infoObj.equOnlineStatus == 2
                    ? '在线'
                    : infoObj.equOnlineStatus == 3
                    ? '离线'
                    : '异常'
                }}</span>
              </div>
              <span class="qy">所在区域：{{ infoObj.areaName }}</span>
            </div>
            <el-radio-group v-model="dataRangeType" style="margin: 7px 0" @input="handleGetEchartDataList()">
              <el-radio-button :label="item" :name="item" v-for="(item, index) in tabData" :key="index"
                >{{ item }}
              </el-radio-button>
            </el-radio-group>
            <div class="tabBox">
              <div ref="equDataChart" class="charts"></div>
            </div>
          </div>
        </div>
        <div class="right_content">
          <div class="line1"><img src="@/assets/dashboard/waring.png" class="sbxx_img" /><span>报警信息</span></div>
          <div class="bjInfo">
            <div v-if="!bjInfo || bjInfo.length == 0">暂无报警信息</div>
            <div v-for="(item, index) in bjInfo" class="bj_item" :key="index">
              <span class="yellow">{{ item.policeType | filterPoliceType }}</span>
              <div class="bj_content">{{ item.detail }}</div>
              <div>{{ item.createTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="info-window-small animate__animated animate__zoomIn">
      <img src="@/assets/dashboard/close.png" class="close_img" @click="$emit('closeInfoWindow')" />
      <div class="flexBox">
        <div class="title">
          {{ infoObj.pipName ? infoObj.pipName : infoObj.name }}
        </div>
        <div :class="infoObj.status == 1 ? 'xianzhuang' : 'guihua'">
          {{ infoObj.status == 1 ? '现状' : '规划' }}
        </div>
      </div>
      <div class="content-wrap">
        <div class="line1"><img src="@/assets/dashboard/gd_small.png" class="sbxx_img" />管点信息</div>
        <div class="gd_bottom">
          <div class="item_flex">
            管点编号：<span>{{ infoObj.pipNo ? infoObj.pipNo : infoObj.name }}</span>
          </div>
          <div class="item_flex">
            所在区域：<span>{{ infoObj.areaName }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getpipCurve, getpipEquipTrCurve, getPipEqpList } from '@/api/dashboard'
import { getTimeWeekMouth, setFontSize } from '@/utils/time_tool'
import { policeTypeArr } from '@/utils/enumeration'
import { initDictOptions } from '@/components/dict/JDictSelectUtil'
export default {
  name: 'EquipInfoWindow',
  props: {
    infoObj: {
      type: Object,
      default() {
        return null
      },
    },
    bjInfo: {
      type: Array,
      default() {
        return []
      },
    },
  },
  filters: {
    filterPoliceType: function (type) {
      const item = policeTypeArr.find((item) => item.value === type)
      if (item) {
        return item.policeLabel || '缺少该报警类型！'
      } else {
        return '缺少该报警类型！'
      }
    },
    filtereEuipType: function (type, equipTypeList) {
      const item = equipTypeList.find((item) => item.value === type + '')
      if (item) {
        return item.name || '缺少该设备类型！'
      } else {
        return '缺少该设备类型！'
      }
    },
  },
  data() {
    return {
      tabData: ['当天', '7天', '30天'],
      dataRangeType: '当天',
      equipTypeList: [], //设备类型-字典值列表
      otherEquipList: [],
    }
  },
  watch: {
    'infoObj.pipNo': {
      handler(pipNo) {
        if (!pipNo) return
        this.handleGetPipEqpList(pipNo)
      },
      immediate: true,
    },
  },
  mounted() {
    // 获取设备类型枚举
    this.getEquipTypeFun('ps_equ_type')
  },
  methods: {
    // 获取设备类型枚举
    async getEquipTypeFun(dictCode) {
      // console.log("获取设备类型枚举");
      const res = await initDictOptions(dictCode)
      this.equipTypeList = (res.result || []).map((x) => {
        return {
          name: x.itemText,
          value: x.itemValue,
        }
      })
    },
    async handleGetPipEqpList(pipNo) {
      const res = await getPipEqpList({
        pipPointNo: pipNo,
        pageNo: 1,
        pageSize: 20,
      })
      this.otherEquipList = res.result.records || []
      // console.log("handleGetPipEqpList", res);
    },
    changeShowEquipInfo(equip) {
      // console.log("changeShowEquipInfo", equip);
      const { equType, equNo, onlintStatus } = equip
      this.$emit('updateInfoObj', {
        equType,
        equNo,
        equOnlineStatus: onlintStatus,
      })
      this.$nextTick(() => {
        this.handleGetEchartDataList(equip.equNo + '')
      })
    },
    // 根据设备类型获取不同图表数据列表
    async handleGetEchartDataList(equNo) {
      let equType = this.infoObj.equType
      if (!equNo) {
        equNo = this.infoObj.equNo
      }
      const timeType = this.dataRangeType
      let params = {
        createdTimeSt: getTimeWeekMouth(timeType)[0],
        createdTimeEd: getTimeWeekMouth(timeType)[1],
      }
      let dataList = []
      // ['液位计 1','流量计 2','氨氮 3','PH 4','COD 5','电导率 6','投入式液位计 7']
      // ['cm 液位高度','m3/h 流量','mg/L 氨氮含量','PH值 PH值','mg/L COD','us/cm 电导率','cm 液位高度']
      if (equType === 1) {
        // 设备类型-液位计 => 液位高渡
        const res = await getpipCurve(equNo, params)
        dataList = res.result ? res.result : []
        this.initChartEquData(dataList, 'equDataChart', 'cm', '液位高度', timeType)
      } else if (equType === 2) {
        // 设备类型-流量计-曲线图
        const res = await getpipEquipTrCurve(equNo, params)
        dataList = res.result ? res.result : []
        this.initChartEquData(dataList, 'equDataChart', 'm3/h', '流量', timeType)
      } else if (equType === 3) {
        // 设备类型-氨氮-曲线图
        const res = await getpipEquipTrCurve(equNo, params)
        dataList = res.result ? res.result : []
        this.initChartEquData(dataList, 'equDataChart', 'mg/L', '氨氮含量', timeType)
      } else if (equType === 4) {
        // 设备类型-PH值-曲线图
        const res = await getpipEquipTrCurve(equNo, params)
        dataList = res.result ? res.result : []
        this.initChartEquData(dataList, 'equDataChart', 'PH值', 'PH值', timeType)
      } else if (equType === 5) {
        // 设备类型-COD-曲线图
        const res = await getpipEquipTrCurve(equNo, params)
        dataList = res.result ? res.result : []
        this.initChartEquData(dataList, 'equDataChart', 'mg/L', 'COD', timeType)
      } else if (equType === 6) {
        // 设备类型-电导率-曲线图
        const res = await getpipEquipTrCurve(equNo, params)
        dataList = res.result ? res.result : []
        this.initChartEquData(dataList, 'equDataChart', 'us/cm', '电导率', timeType)
      } else if (equType === 7) {
        // 设备类型-投入式液位计-曲线图
        const res = await getpipEquipTrCurve(equNo, params)
        dataList = res.result ? res.result : []
        this.initChartEquData(dataList, 'equDataChart', 'cm', '液位高度', timeType)
      }
    },
    // 管网检测-设备信息弹窗-获取图表数据并绘制
    initChartEquData(data, dom = 'equDataChart', name = 'cm', title = '液位高度', timeType) {
      const startData = {
        deviceData: null,
        reportTime: getTimeWeekMouth(timeType)[0],
      }
      const endData = {
        deviceData: null,
        reportTime: getTimeWeekMouth(timeType)[1],
      }
      data.unshift(startData)
      data.push(endData)
      let yData2 = data.map((item) => [item.reportTime, item.deviceData])
      let chart = this.$echarts.init(this.$refs[dom])
      let splitNumber = 8
      let formaterType = 1
      if (this.dataRangeType === '当天') {
        splitNumber = 12
        formaterType = 1
      } else if (this.dataRangeType === '7天') {
        splitNumber = 8
        formaterType = 2
      } else if (this.dataRangeType === '30天') {
        splitNumber = 14
        formaterType = 3
      }
      let option = {
        title: {},
        tooltip: {
          trigger: 'axis',
          textStyle: {
            color: '#fff',
            fontSize: setFontSize(14),
          },
          axisPointer: {
            lineStyle: {
              color: '#fff',
              fontSize: setFontSize(14),
            },
          },
          formatter: (param) => {
            // console.log(param);
            const { value, color, seriesName } = param[0]
            return `
              <div>
                <p>${value[0]}</p>
                <div style="display:flex">
                  <div style="width:10px;height:10px;border-radius: 50%;margin:6px 4px 0 0;background:
                  ${typeof color === 'string' ? color : color.colorStops[0].color}"></div>
                  <div>${seriesName} ${value[1]}</div>
              </div>
            `
          },
        },
        legend: {
          icon: 'circle',
          itemWidth: setFontSize(12),
          itemHeight: setFontSize(12),
          itemGap: setFontSize(13),
          right: '4%',
          textStyle: {
            fontSize: setFontSize(14),
            color: '#fff',
          },
        },
        grid: {
          left: '1%',
          right: '3.5%',
          bottom: '0%',
          top: setFontSize(40),
          containLabel: true,
        },
        xAxis: [
          {
            type: 'time', // 时间X轴不需要再有data字段，splitNumber控制显示间隔
            boundaryGap: false,
            splitNumber,
            axisLine: {
              lineStyle: {
                color: '#fff',
              },
            },
            axisLabel: {
              margin: setFontSize(10),
              textStyle: {
                fontSize: setFontSize(12),
                color: '#fff',
              },
              formatter: function (value) {
                if (formaterType === 1) {
                  return new Date(value).format('hh:mm')
                } else if (formaterType === 2) {
                  return new Date(value).format('MM-dd')
                } else {
                  return new Date(value).format('dd')
                }
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#3e4e5e'],
                width: setFontSize(0.5),
                type: 'dashed', //虚线
              },
            },
            axisTick: {
              //不显示坐标轴刻度线
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: name,
            nameTextStyle: {
              color: '#fff',
              fontSize: setFontSize(14),
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              type: 'dashed',
              lineStyle: {
                color: '#fff',
              },
            },
            axisLabel: {
              margin: setFontSize(10),
              textStyle: {
                fontSize: setFontSize(12),
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#3e4e5e'],
                width: setFontSize(0.5),
                type: 'dashed', //虚线
              },
            },
          },
        ],
        series: [
          {
            name: title,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: setFontSize(10),
            showSymbol: false,
            lineStyle: {
              normal: {
                width: setFontSize(1),
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(19, 195, 249, 0.5)',
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(19, 195, 249, 0)',
                    },
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 252, 207, 0.1)',
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: 'rgba(19, 195, 249,1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(19, 195, 249,1)',
                  },
                ]),
              },
              // emphasis: {
              //   color: "rgb(99,250,235)",
              //   borderColor: "rgba(99,250,235,0.2)",
              //   extraCssText: "box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);",
              //   borderWidth: 10,
              // },
            },
            data: yData2,
          },
        ],
      }
      chart.setOption(option)
      window.addEventListener('resize', function () {
        chart.resize()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.infoWindow {
  box-sizing: border-box;
  width: 760px;
  height: 427px;
  background: url('~@/assets/dashboard/infowindow_bc.png') no-repeat;
  background-size: 100% 100%;
  padding: 20px;
  padding-top: 0;
}

.info-window-small {
  min-width: 420px;
  height: 140px;
  background: url('~@/assets/dashboard/bg_equip_small.png') no-repeat;
  background-size: 100% 100%;
  padding: 20px;
  padding-top: 0;
  box-sizing: border-box;
  // bg_equip_small.png
  span {
    font-weight: 700;
    //cursor: pointer;
    background: linear-gradient(-0deg, #15b2f4 100%, #45faff 100%);
    -webkit-background-clip: text;
    color: transparent;
  }
  .flexBox {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .xianzhuang {
    padding: 0 4px;
    margin-left: 4px;
    background-image: linear-gradient(270deg, #15b2f4 0%, #45faff 100%);
    border-radius: 2px;
    font-size: 14px;
    margin-bottom: 4px;
  }

  .guihua {
    padding: 0 4px;
    margin-left: 4px;
    margin-bottom: 4px;
    background-image: linear-gradient(270deg, #f4d115 0%, #ffbb45 100%);
    border-radius: 2px;
    font-size: 14px;
  }

  .content-wrap {
    padding-bottom: 16px;
    //padding-top: px;
  }

  .gd_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .item_flex {
    width: 50%;
  }
}

.title {
  height: 43px;
  line-height: 40px;
  font-size: 16px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}

.close_img {
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 24px;
  height: 24px;
}
.content {
  display: flex;
  padding: 10px 0;
}
.equip-title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-dropdown-link {
    cursor: pointer;
    color: #ccc;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
}
.line1 {
  display: flex;
  align-items: center;
  margin-bottom: 5px;

  .sbxx_img {
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }
}
.left_content {
  position: relative;
  width: 90%;
  overflow-y: scroll;
  overflow-x: hidden;
  &::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 2px;
    border-radius: inherit;
    background: linear-gradient(180deg, #26ffea00 0%, #26ecff 50%, #26ffea00 100%);
  }
  .line2 {
    margin: 10px 0;
    display: flex;
    align-items: center;
    font-size: 14px;
    .lx_img {
      width: 10px;
      height: 10px;
      margin-right: 4px;
      margin-left: 3px;
    }

    .status {
      margin-left: 6px;
      display: inline-block;
      width: 40px;
      height: 16px;
      background-image: linear-gradient(270deg, #0791cb 0%, #34dadf 100%);
      border-radius: 10px;
      color: #fff;
      font-size: 12px;
      text-align: center;
    }

    .qy {
      margin-left: 40px;
    }
  }

  .tabBox {
    .charts {
      width: 500px;
      height: 235px;
      margin-bottom: 10px;
    }
  }
}

.right_content {
  box-sizing: border-box;
  width: 257px;
  padding-left: 10px;

  .bjInfo {
    box-sizing: border-box;
    overflow-y: scroll;
    height: 320px;
    padding: 10px 0px;
    line-height: 20px;
    font-size: 14px;

    .bj_item {
      margin-bottom: 10px;
      margin-top: 5px;

      .bj_content {
        padding-top: 10px;
      }
    }

    .red {
      border: 1px solid red;
      color: red;
      border-radius: 4px;
      background: #ff44444d;
      padding: 1px 4px;
    }

    .orange {
      border: 1px solid #e84f0f;
      color: #e84f0f;
      background: #e84f0f4d;
      border-radius: 4px;
      padding: 1px 4px;
    }

    .yellow {
      padding: 2px 4px;
      border: 1px solid #fccd4a;
      border-radius: 4px;
      background: rgba(105, 59, 4, 0.5);
      font-size: 14px;
      color: #fccd4a;
    }
  }
}
.infoWindow {
  ::v-deep .el-radio-button__inner {
    padding: 6px 10px;
    color: #fff;
    background: unset;
    border: 1px solid #409eff;
  }

  ::v-deep .el-radio-button:first-child .el-radio-button__inner {
    border-left: 1px solid #409eff;
  }

  ::v-deep .el-radio-button.is-active {
    background-image: linear-gradient(-45deg, #158cf4 0%, #45e4ff 100%);
    //border: 1px solid #15B2F4;
  }

  ::v-deep .el-popper .popper__arrow,
  .el-popper .popper__arrow::after {
    display: none;
  }
}
</style>
